import { Node } from '@antv/x6'

export class Group extends Node {
    collapsed = false;
    expandSize = { width: 0, height: 0 };

    isCollapsed() {
      return this.collapsed
    }

    toggleCollapse(collapsed) {
      const target = collapsed == null ? !this.collapsed : collapsed
      if (target) {
        this.attr('buttonSign', { d: 'M 1 5 9 5 M 5 1 5 9' })
        this.expandSize = this.getSize()
        this.resize(250, 36)
      } else {
        this.attr('buttonSign', { d: 'M 2 5 8 5' })
        if (this.expandSize) {
          this.resize(this.expandSize.width, this.expandSize.height)
        }
      }
      this.collapsed = target
    }
}

Group.config({
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    },
    {
      tagName: 'text',
      selector: 'label'
    },
    {
      tagName: 'g',
      selector: 'buttonGroup',
      children: [
        {
          tagName: 'rect',
          selector: 'button',
          attrs: {
            'pointer-events': 'visiblePainted'
          }
        },
        {
          tagName: 'path',
          selector: 'buttonSign',
          attrs: {
            fill: 'none',
            'pointer-events': 'none'
          }
        }
      ]
    }
  ],
  attrs: {
    body: {
      rx: 4,
      ry: 4,
      refWidth: '100%',
      refHeight: '100%',
      stroke: '#C2C8D5',
      fill: '#fff'
    },
    buttonGroup: {
      refX: 10,
      refY: 10
    },
    button: {
      height: 14,
      width: 16,
      rx: 2,
      ry: 2,
      fill: '#f5f5f5',
      stroke: '#ccc',
      cursor: 'pointer',
      event: 'node:collapse'
    },
    buttonSign: {
      refX: 3,
      refY: 2,
      stroke: '#808080'
    },
    label: {
      fill: '#333',
      fontSize: 16,
      cursor: 'pointer',
      textWrap: {
        width: 200,
        height: 20,
        ellipsis: true
      },
      textAnchor: 'left',
      refX: 32,
      refY: 10
    }
  }
})
